<template>
  <div class="about">
    <!--@submit 是vant组件中提供的事件名，不能修改，onSubmit 是我们自定义的方法名，可以随便定义-->
    <van-form @submit="onSubmit"  @failed="myFail">
      <van-field
      v-model="username"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{required:true,message: '请填写用户名'}]"
      />
      <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data(){
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    onSubmit(values){
      console.log('submit',values);
    },
    myFail(errorInfo){
      //提交失败时(用户名和密码为空)，输出错误信息
      console.log(errorInfo)
    }
  }
}
</script>